<template>
  <div class="hello">
    <img class="myImg" :src="imgSrc" alt="">
    <h1>{{ msg }}</h1>
    <h1>{{name}}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
    <comment></comment>
    <div style="width:300px;height: 800px;border: 1px solid #e1e1e1;"></div>
    <el-button @click="test">测试message</el-button>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'querystring';
import { imgSrc1 } from './imgSrc.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      name: '',
      imgSrc: ''
    }
  },
  components: {
    comment: require('./comment.vue').default
  },
  mounted () {
    axios.get('/api/listUsers').then(res => {
      this.name = res.data
    })
    axios({
      method: 'post',
      url: '/api/listUsers2',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
      data: qs.stringify({
        a: imgSrc1
      })
    }).then(res => {
      this.imgSrc = res.data.a
    }).catch((err) => {
    })
  },
  methods: {
    test () {
      this.$message({
        message: 'aaaa',
        duration: 2000
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
